<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-08 14:55:13
 * @LastEditTime: 2020-07-17 14:00:55
 * @LastEditors: Please set LastEditors
 -->
<template>
    <search-table
        :columns="taskCol" 
        :data="taskData"
        :total="taskTotal"
        :page.sync="taskCurrentPage"
        :size.sync="taskItemPage"
        @change-size="switchTaskItemPage"
        @change-page="switchineTaskCurrentPage">
        <template slot="button-group">
            <Button type="primary" ghost @click="createFlagTask" :disabled="disabledAllBtn" class="zIndexStyleBtn"><Icon type="ios-add" :size="16" class="position_i"/>创建任务</Button>
            <!-- <BatchRemove
                    class="zIndexStyleBtn"
                    :dataNum="selectedData.length"
                    @on-ok="deleteManyTask"
                    @on-cancel="cancel"></BatchRemove> -->
            <Button type="primary" ghost @click="taskConfigerMess = true" :disabled="disabledAllBtn" class="zIndexStyleBtn"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button>
        </template>
        <!-- <template slot="select-group">
            <Select filterable v-model="queryInfo.status" clearable @on-change="debounceSearch" placeholder="任务状态">
                <Option value="completed" key="completed">已完成</Option>
                <Option value="running" key="running">运行中</Option>
                <Option value="initialized" key="initialized">初始化</Option>
                <Option value="failed" key="error">已失败</Option>
            </Select>
        </template>
        <template slot="input-group">
            <Input v-model="queryInfo.name" placeholder="名称" @on-change="debounceSearch" clearable/>
        </template> -->
        <!-- <card-list :columns="columnsData" :data="taskData"></card-list> -->
    
<!-- <div>
    <div class="headerBtn">
        <Button type="primary" @click="createFlagTask" class="zIndexStyleBtn"><Icon type="md-add-circle" :size="16" class="position_i"/>创建任务</Button>
        <BatchRemove
                class="zIndexStyleBtn"
                :dataNum="selectedData.length"
                @on-ok="deleteManyTask"
                @on-cancel="cancel"></BatchRemove>
        <Button type="primary" @click="taskConfigerMess = true" class="zIndexStyleBtn"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button>
        <Page :total="taskTotal"  show-sizer :current="taskCurrentPage" :page-size="taskItemPage" :show-total= true  @on-change="switchineTaskCurrentPage" @on-page-size-change="switchTaskItemPage" class-name="pageStyle" />
    </div> -->
    <Modal
        v-model="createFlagTaskModal"
            :title="judgePanelType ? '创建任务':'修改任务' "
        ok-text = "确定"
        width=600
        :loading = createFlagTaskModalLoading
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="名字" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入任务名称" clearable :maxlength="64"></Input>
            </FormItem>
            <FormItem label="类型" prop="taskMode" v-if="false">
                <RadioGroup v-model="formValidate.taskMode">
                    <Radio label="normal" :disabled="disabledTepBol">流程任务</Radio>
                    <Radio label="preset" :disabled="disabledTepBol">预设临机任务</Radio>
                    <!-- <Radio label="temp" :disabled="!disabledTepBol">实时任务</Radio> -->
                </RadioGroup>
            </FormItem>
            <FormItem label="配置" prop="configer" style="position:relative">
                <Icon type="md-add-circle" :size="20" style="cursor:pointer;position:absolute;top:-20px;right:0px" @click="taskConfigerMess = true" title="配置管理"/>
                <Select filterable v-model="formValidate.configer" placeholder="请选择配置"   filterable clearable  @on-change="showConfiguration" >
                    <Option  v-for="item in configurationData" :key="item.id" :value="item.id"  @mouseenter.native="mouseOverConfiger($event,item.id)" @mouseleave.native="mouseLeaveConfiger($event,item.id)" @click.native="ddd">{{item.name}}</Option>
                </Select>
                <div v-show="configurationInformation" :style="{position:'absolute',left:cardPanelLeft,top:cardPanelTop,zIndex:'9999999999999999',}" @mouseenter="jinru" @mouseleave="yichu" @click="ddd">
                    <Card :style="{minWidth:'350px',maxWidth:'600px'}"  >
                        <p slot="title" style="position:relative">
                            <Icon type="ios-construct"></Icon>
                            {{configPanel.configName}}
                            <span slot="title" style="position:absolute;right:0px">
                                <Icon type="ios-contact"></Icon>
                                {{configPanel.configCreatorName}}
                            </span>
                        </p>
                        <ul>
                            <li><span class="_dot"></span>Path：{{configPanel.configPath}}</li>
                            <li><span class="_dot"></span>Systype：{{configPanel.configSystype}}</li>
                            <li><span class="_dot"></span>KAFKA地址：{{configPanel.kafkaAdress}}</li>
                            <li><span class="_dot"></span>TOPIC：{{configPanel.configTopic}}</li>
                            <!-- <li><span class="_dot"></span>读取周期：{{configPanel.configPeriod}}秒</li> -->
                            <li><span class="_dot"></span>Desc:{{configPanel.configDescription}}</li>
                        </ul>
                    </Card>
                </div>
            </FormItem>
            <div v-show="configerParams" :style="{'border':'1px solid #ddd','boxShadow': boxShadow,'borderRadius': '5px','padding': '20px','cursor':'pointer'}" @mouseover="overStyle" @mouseout="removeStyle">
                <p style="text-align:center;font-size:16px">配置详情</p>
                <FormItem label="操作系统" prop="osType">
                    <span class="_dot" style="position:absolute;left:-73px;top:11px"></span>
                    <RadioGroup v-model="formValidate.osType">
                        <Radio label="Windows" disabled>Windows</Radio>
                        <Radio label="Linux" disabled>Linux</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="路径" prop="path">
                    <span class="_dot" style="position:absolute;left:-50px;top:11px"></span>
                    <Input v-model="formValidate.path" placeholder="请输入配置路径" readonly="readonly"></Input>
                </FormItem>
                <FormItem label="KAFKA地址" prop="kafkaAdress" >
                    <span class="_dot" style="position:absolute;left:-90px;top:11px"></span>
                    <Input v-model="formValidate.kafkaAdress" placeholder="请输入KAFKA地址" readonly="readonly"></Input>
                </FormItem>
                <FormItem label="TOPIC" prop="configTopic" >
                    <span class="_dot" style="position:absolute;left:-62px;top:11px"></span>
                    <Input v-model="formValidate.configTopic" placeholder="请输入TOPIC" readonly="readonly"></Input>
                </FormItem>
                <!-- <FormItem label="读取周期/秒" prop="configPeriod" >
                    <span class="_dot" style="position:absolute;left:-88px;top:11px"></span>
                    <input-number :min="1" :value="0"  v-model="formValidate.configPeriod" style="width:100%"  readonly="readonly"></input-number>
                </FormItem> -->
            </div>
            <!-- <FormItem label="操作系统" prop="osType">
                <RadioGroup v-model="formValidate.osType">
                    <Radio label="Windows">Windows</Radio>
                    <Radio label="Linux">Linux</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="路径" prop="path">
                <Input v-model="formValidate.path" placeholder="请输入配置路径"></Input>
            </FormItem>
            <FormItem label="KAFKA地址" prop="kafkaAdress" >
                <Input v-model="formValidate.kafkaAdress" placeholder="请输入KAFKA地址"></Input>
            </FormItem>
            <FormItem label="TOPIC" prop="configTopic" >
                <Input v-model="formValidate.configTopic" placeholder="请输入TOPIC"></Input>
            </FormItem>
            <FormItem label="读取周期/秒" prop="configPeriod" >
                <input-number :min="1" :value="0"  v-model="formValidate.configPeriod" style="width:100%" step="5"></input-number>
            </FormItem> -->
            
            <FormItem v-model="formValidate.selectedVmData"  label="虚拟机">
                <span class="starlet">*</span>
                <input type="hidden" >
                <div class="flex-wrap">
                    <Tag v-for="item in formValidate.selectedVmData" :key="item.name" :name="item.id" closable @on-close="handleClose2" color="primary" type='dot' >{{ item.name }}</Tag>
                </div>
            </FormItem>
            
            <div style="text-align:right">
                <Button type="primary" @click="addSelectedData" style="margin-right:17px">添加</Button>
                <Input placeholder="请输入名称" style="width: 210px" v-model="formValidate.vmName" clearable></Input>
                <Input placeholder="请输入IP" style="width: 210px" v-model="formValidate.vmIP" clearable></Input>
                <Button type="primary" @click="refreshVmList" style="margin-left:5px">搜索</Button>
            </div>
            <Table border ref="" :columns="columnsVmList" :data="dataVmList"  :stripe="showStripe" :show-header="showHeader" :size="tableSize" style="margin-top:10px" @on-selection-change="getSelectedData"></Table>
            <Page :total="vmTotal" show-elevator   :current="vmCurrentPage" :page-size="vmItemPage" :show-total= true  @on-change="switchineVmCurrentPage" @on-page-size-change="switchVmItemPage" class-name="pageStyleVm"/>
            <FormItem label="属性" >
                <cusAttribute ref="cusAttribute" @func="getMsgFormSon" v-bind:msgVal="propertiesData"></cusAttribute>
            </FormItem>
            <FormItem label="描述" prop="desc" style="margin-top:10px">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容" clearable :maxlength="200"></Input>
            </FormItem>
        </Form>
    </Modal>
    <Modal
        v-model="taskDeailModal"
        title="任务启动详情"
        width = '60'
        footer-hide
        >
        <Table border ref="" :columns="taskDeailColumns" :data="taskDeailData"  :stripe="showStripe" :show-header="showHeader" :size="tableSize" @on-expand="hostDeail"></Table>
    </Modal>
    <Modal 
        v-model="taskConfigerMess" 
        width='80%' 
        title="读取配置"
        okText = "关闭"
        cancelText=""
        @on-cancel = "clickEvent"
        @on-ok = "clickEvent"
        :footer-hide = 'false'
    >
        <onceReadFileCollect readType="qga_read" ref='ceReadFileCollect'></onceReadFileCollect>
        <template #footer>
          <Button type="primary" @click="clickEvent">关闭</Button>
        </template>
    </Modal>
    <!-- <Select filterable placeholder="Selective filtration condition"   filterable clearable style="width:150px;">
        <Option >全部的</Option>
        <Option >完成的</Option>
        <Option >失败的</Option>
        <Option >进行中的</Option>
        <Option >未进行的</Option>
    </Select> -->
    <Modal
        v-model="loopReadPanel"
        title="读取结果"
        width = '80%'
        :mask-closable = "false"
        on-cancel ="closePanel"
        @on-visible-change = "fgm"
        footer-hide
        id="resultOnce"
        >
        <!-- <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p> -->
        <div style="width:100%;min-height:300px;background:#000;color:#fff;font-size:14px;overflow-y:auto;max-height:600px;height:300px">
            <!-- <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
            <p>Will you delete it?</p> -->
            <pre style="background:#000;color:#fff;border:none">{{contentLoop}}</pre>
        </div>
        <div slot="footer">
            <Button type="primary"  @click="loopReadPanel = false">关闭</Button>
        </div>
    </Modal>
    <!-- <Table border ref="selection" :columns="columnsData" :data="taskData"  :stripe="showStripe" :show-header="showHeader" @on-selection-change="getSelectedTableItem" :height="tableHeight"></Table> -->
</search-table>
</template>
<script>
import axios from '@/libs/axios1'
import {loadItemConfiguration,showConfiguration,getAllVm,saveoutbandTask,getTaskListDetailData,getTaskList,deleteTask,taskDetail,amendTask,activeTask,taskDetailHis,hostDetail} from '@/api/drill.js'
import onceReadFileCollect from '../configer/onceReadFileCollect'
import TableTooltip from '@/view/drill_compete/page/tableTooltip.vue'
import { validateName, taskMixin } from './taskMixin';
export default {
    name:"topoOnceReadFile",
    components:{
        onceReadFileCollect,
        TableTooltip
    },
    props:['disabledAllBtn'],
    mixins:[taskMixin],
    data(){
        return{
            tableHeight:'',
            taskConfigerMess:false,
            currentProjectId:"",
            taskTypeTable:'qga_read',
            taskTypeTableTitle:"单次读取文件",
            selectedData:[],
            selectedDataConfiger:[],
            // amendTaskId:"",
            columnsData: [
                // {
                //     type: 'selection',
                //     width: 60,
                //     align: 'center',
                    
                // },
                // {
                //     title:'任务ID',
                //     key:'id',
                //     align:'center'
                // },
                {
                    title: '任务名称',
                    key: 'name',
                    align: 'center',
                    placement:'top-left'
                },
                // {
                //     title: 'TaskType',
                //     key: 'taskType',
                //      align:'center'
                // },
                {
                    title: '配置',
                    key: 'configName', // configName
                    align: 'center',
                    tooltip:true,
                    width:100
                    //  render: (h, params) => {
                    //       params.row.configName =  this.configPanel.configName
                    //     return h('div', {}, params.row.configName)
                    //  }
                },
                // {
                //     title: 'id',
                //     key: 'id',
                //     visible:false
                // },
                {
                    title: '创建者',
                    key: 'creatorName',
                     align:'center',
                     width:100,
                     tooltip:true
                },
                {
                    title: '创建时间1',
                    key: 'created',
                    align:'center',
                    width:140
                },
                {
                    title: '状态',
                    key: 'status',
                    align:'center',
                    placement:'top-right',
                    width:60,
                    render:(h,params)=>{
                        return this.renderTaskStatus(h,params.row.status)
                    }
                },
                {
                    title: '详情',
                    key: '',
                    align: 'center',
                    // minWidth:140,
                    render: (h, params) => {
                        let statics = params.row.overview;
                        let statusGroup = [];
                        if (JSON.stringify(statics) != "{}") {
                            for (let i in statics) {
                                let text = '';
                                switch (i) {
                                    case "running": text = '运行中'; break;
                                    case "error": text = '失败'; break;
                                    case "failed": text = '失败'; break;
                                    case "completed": text = '完成'; break;
                                    case "initialized": text = '初始化'; break;
                                    case "starting": text = '启动中'; break;
                                    case "closing": text = '关闭中'; break;
                                    default: text = i; break;
                                }
                                statusGroup.push(h('p', {}, text + ':' + statics[i]))
                            }
                        }
                        // console.log(statusGroup)
                        return h('div', {}, statusGroup)
                    }
                },
                {
                    title:'描述',
                    key:'description',
                    align:'center',
                    width:200,
                    tooltip:true
                },
                // {
                //     title: '任务种类',
                //     key:'taskMode',
                //     align: 'center',
                //     render: (h, params) => {
                //         let _text = null;
                //         if (params.row.taskMode == "normal") {
                //             _text = "流程任务"
                //         } else if (params.row.taskMode == "temp") {
                //             _text = "实时任务"
                //         } else {
                //             _text = "预设临机任务"
                //         }
                //         return h('div', {}, _text)
                //     }
                // },
                {
                    title:'操作',
                    key:'-',
                    align:'center',
                    width:350,
                    placement:'top-right',
                    action:true,
                    render:(h,params)=>{
                        let  _this = this;
                        let taskStatus = null
                        let taskBtnType = null
                        let btnStyle = null;
                        if(params.row.taskMode=="normal"){
                            btnStyle = "none"
                        }else{
                            btnStyle = "inline-block"
                        }
                        switch (params.row.status) {
                            case "initialized":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "error":
                            case "failed":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "running":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            case "completed":
                                taskStatus = "开始"
                                taskBtnType = "success"
                                break;
                            case "starting":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            case "closing":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                             case "stop_error":
                                taskStatus = "停止"
                                taskBtnType = "error"
                                break;
                            default:
                                break;
                        }
                        return h("div",{
                        	attrs:{
                        		class:'btnCenter'
                        	}
                        },[
                            h('Poptip',{
                                props:{
                                    confirm:true,
                                    title:"您确定要删除此任务吗？",
                                    transfer:true
                                },
                                on:{
                                    'on-ok':()=>{
                                        _this.deleteTask(params.row.id)
                                    },
                                    'on-cancel':()=>{

                                    }
                                }
                            },[h('Button',{
                                props:{
                                    type:'error',
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                attrs:{
                                	title:'删除'
                                },
                                style:{
                                   border:'none',
									background:'none',
									boxShadow:'none',
                                },
                                },[
                                	h('img', {
				                        attrs: {
				//                          src: !this.setReBtnStatus(params.row) ?require('../../../assets/globalIcon/del.png'):require('../../../assets/globalIcon/dis-del.png'),
				                        	src:this.disabledAllBtn ? require('../../../../../assets/project/delNote-d.png') : require('../../../../../assets/project/delNote-h.png')
				                        },
				                        style: {
				                            cursor: 'pointer',
//				                            'margin-right':'5px',
				                            'vertical-align': 'middle',
//				                            width:'16px',
//				                            height:'auto',
				                            display:'inline-block',
				                            marginBottom:'4px',
				                        },
				                    }),
//				                    h('span',{
//				                        style: {
//				                            cursor: 'pointer',
//				//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
//											color:'#2d8cf0'
//				                        },
//				                    },'删除')
                                ])]),
                            h('Button',{
                                props:{
                                    type:"text",
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                attrs:{
                                	title:'修改'
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                },
                                on:{
                                    click:()=>{
                                        _this.updateTask(params.row.id)
                                    }
                                }
                            },[
                            	h('img', {
			                        attrs: {
			//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
			                        	src:this.disabledAllBtn ? require('../../../../../assets/project/modifys.png') : require('../../../../../assets/project/modifys-h.png')
			                        },
			                        style: {
			                            cursor: 'pointer',
//			                            'margin-right':'5px',
			                            'vertical-align': 'middle',
//			                            width:'16px',
//			                            height:'auto',
			                            display:'inline-block',
			                            marginBottom:'4px',
			                        },
			                    }),
//			                    h('span',{
//			                        style: {
//			                            cursor: 'pointer',
//			//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
//										color:'#2d8cf0'
//			                        },
//			                    },'修改')
                            ]),
                            h('Poptip',{
                                props:{
                                    confirm:true,
                                    title:"您确定要"+taskStatus+"此任务吗？",
                                    transfer:true
                                },
                                on:{
                                    'on-ok':()=>{
                                        _this.activeTask(params.row.id,taskStatus)
                                    },
                                    'on-cancel':()=>{

                                    }
                                }
                            },[h('Button',{
                                props:{
                                    //type:taskBtnType,
                                    type:'text',
                                    size:'small',
                                    disabled:this.disabledAllBtn
                                },
                                title:{
                                	title:taskStatus+'任务'
                                },
                                style:{
                                    border:'none',
									background:'none',
									boxShadow:'none',
                                    display:btnStyle
                                },
                                },[
                                	h('img', {
				                        attrs: {
				//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
				                        	src:taskStatus == '停止' ? (this.disabledAllBtn ? require('../../../../../assets/scene/dis-stop-task.png') : require('../../../../../assets/scene/stop-task.png')) : (this.disabledAllBtn ? require('../../../../../assets/scene/dis-start-task.png') : require('../../../../../assets/scene/start-task.png'))
				                        },
				                        style: {
				                            cursor: 'pointer',
	//			                            'margin-right':'5px',
				                            'vertical-align': 'middle',
	//			                            width:'16px',
	//			                            height:'auto',
				                            display:'inline-block',
				                            marginBottom:'4px',
				                        },
				                    }),
				                    h('span',{
				                        style: {
				                            cursor: 'pointer',
				//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
											color:'#2d8cf0'
				                        },
				                    })//,taskStatus+'任务'
                                ])]),
                                h('Button',{
                                props:{
                                    type:"primary",
                                    size:'small'
                                    // style:{margin:'10px'}
                                },
                                style:{
                                   border:'none',
									background:'none',
									boxShadow:'none',
                                },
                                on:{
                                    click:()=>{
                                        _this.taskDeail(params.row.id)
                                    }
                                }
                            },[
                            	h('img', {
			                        attrs: {
			//                          src: !this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/modify.png'):require('../../../assets/globalIcon/dis-modify2.png'),
			                        	src:require('../../../../../assets/project/magnifier-h.png')
			                        },
			                        style: {
			                            cursor: 'pointer',
//			                            'margin-right':'5px',
			                            'vertical-align': 'middle',
//			                            width:'16px',
//			                            height:'auto',
			                            display:'inline-block',
			                            marginBottom:'4px',
			                        },
			                    }),
			                    h('span',{
			                        style: {
			                            cursor: 'pointer',
			//                          color:!this.setReBtnStatus(params.row) ? '#2d8cf0' : '#c5c8ce'
										color:'#2d8cf0'
			                        },
			                    })//,'查看详情'
                            ]),
                        ])
                    }

                }
            ],
            taskData: [
            ],
            columnsVmList: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: this.$t('name'),
                    key: 'name',
                    align: 'center'
                },
                {
                    title: 'IP',
                    key: 'IP',
                    align: 'center',
                    render: (h, params) => {
                        let value = params.row.IP;
                        let oIP_ = [];
                        value.forEach((item,i) => {
                            oIP_.push(h("p", {
                                color: '#000',
                            }, item))
                        })
                        return h("div", oIP_)
                    }
                },
                {
                    title: this.$t('Add'),
                    key: 'add',
                    align: 'center',
                    render: (h, params) => {
                        let _this = params;
                        return h('Button', {
                            props: {
                                type: 'primary',
                            },
                            on: {
                                click: (e) => {
                                    if (this.selectedVmDataTable.indexOf(_this.row.id) != -1) {
                                        this.$Message.info("已添加")
                                        return;
                                    }
                                    // alert('-')
                                    this.addVmAfterTable(_this.row)
                                    this.selectedVmDataTable.push(_this.row.id)
                                    this.formValidate.selectedVmData.push({
                                        "name": _this.row.name,
                                        "id": _this.row.id
                                    })
                                },
                            }
                        }, "+");
                    }
                }
            ],
            dataVmList: [

            ],
            selectedVmDataTable: [

            ],
            configurationData: [

            ],
            createFlagTaskModalLoading: true,
            showBorder: false,
            showStripe: true,
            showHeader: true,
            showIndex: true,
            showCheckbox: false,
            fixedHeader: false,
            tableSize: 'small',
            createFlagTaskModal: false,
            formValidate: {
                name: '',
                configer: '',
                osType: '',
                path: '',
                category: '',
                type: '',
                content: '',
                kafkaAdress: '',
                configTopic: '',
                configPeriod: 0,
                selectedVmData: [

                ],
                desc: '',
                vmName: '',
                vmIP: '',
                taskMode: 'normal',
            },
            ruleValidate: {
                name: [
                    { required: true, message: '', trigger: 'blur', validator: validateName }
                ],
                configer: [
                    { required: true, message: '请选择配置', trigger: 'change' },
                ],
                selectedVmData: [
                    { required: true, message: "请选择虚拟机" }
                ],
                taskMode: [
                    { required: true, message: '', trigger: 'blur' }
                ],
            },
            vmCurrentPage: 1,
            vmItemPage: 10,
            vmTotal: 0,
            taskCurrentPage: 1,
            taskItemPage: 10,
            taskTotal: 0,
            judgePanelType: true,//判断是修改还是保存
            workingAreaTaskId: "",//存放修改的任务id

            //查看详情面板
            taskDeailModal: false,
            taskDeailColumns: [
                {
                    type: "expand",
                    width: '30',
                    render: (h, params) => {
                        return h('div', {}, [
                            h('Row', { props: { class: 'expand-row' } }, [
                                h('Col', { props: { span: '8' }, style: { width: '50%' } }, [
                                    h('span', { props: { class: 'expand-key' } }, 'host:  '),
                                    h('span', { props: { class: 'expand-value' } }, params.row.host)
                                ]),
                                h('Col', { props: { span: '8' }, style: { width: '50%' } }, [
                                    h('span', { props: { class: 'expand-key' } }, 'hostIP:  '),
                                    h('span', { props: { class: 'expand-value' } }, params.row.hostIp)
                                ]),
                            ]),
                            h('Row', { props: { class: 'expand-row' } }, [
                                h('Col', { props: { span: '8' }, style: { width: '100%' } }, [
                                    h('span', { props: { class: 'expand-key' } }, 'instance_name:  '),
                                    h('span', { props: { class: 'expand-value' } }, params.row.instance)
                                ]),
                            ]),
                            h('Row', { props: { class: 'expand-row' }, }, [
                                h('Col', { props: { span: '8' }, style: { width: '100%' } }, [
                                    h('span', { props: { class: 'expand-key' } }, 'osId:  '),
                                    h('span', { props: { class: 'expand-value' } }, params.row.osId)
                                ]),
                            ]),
                        ])
                    }
                },
                {
                    title: this.$t('name'),
                    key: 'deviceName',
                    align: 'center'
                },
                {
                    title: this.$t('Status'),
                    key: 'status',
                    align: 'center',
                    render:(h,params)=>{
                        return this.renderTaskStatus(h,params.row.status)
                    }
                },
                // {
                //     title: '创建时间',
                //     key: 'created',
                //     align: 'center'
                // },
                // {
                //     title: '更新时间',
                //     key: 'updated',
                //     align: 'center'
                // }, 
                {
                    title: this.$t('Message'),
                    key: 'message',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: '-',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        return h("Button", {
                            props: {
                                type: 'primary'
                            },
                            on: {
                                click() {
                                    // alert('--')
                                    _this.historyId = params.row.id;
                                    _this.historyCreated = params.row.created;
                                    if (_this.historyCreated) {
                                        _this.loopReadPanel = true;
                                    } else {
                                        _this.$Message.error('任务尚未执行');
                                    }
                                }
                            }
                        }, "查看结果")
                    }
                }
            ],
            taskDeailData: [],
            optionHoverEvent: null,
            optionOutEvent: null,
            configurationInformation: false,
            cardPanelLeft: '3px',
            cardPanelTop: '3px',
            configPanel: {
                configPath: '',
                configSystype: '',
                kafkaAdress: '',
                configTopic: '',
                configPeriod: 0,
                configDescription: '',
                configCreateTime: '',
                configCreatorName: '',
                configName: '',
            },
            hoverCdraBol: false,
            boxShadow: '5px 5px 5px #ddd',
            configerParams: false,//回显配置详细信息
            metadataConfigerInfor: {},
            contentLoop: '',
            historyId: '',
            historyCreated: '',
            loopReadPanel: false,
            configerSystype: '',
            currentSceneId: '',
            propertiesData: [],
            currentTaskMode: '',
            disabledTepBol: false,
            processNodeId: '',
            tempTaskBol: false,
            alreadybindtaskData: []
        }
    },
    created() {
        this.currentProjectId = this.$route.query.prjid;
        this.currentScenetId = this.$route.query.id;
        // this.tableHeight = $(window).height() - 224;
        //  this.currentProjectId = "8879b3075da84a0892e1ecc146e8f593"
        this.getTaskList({
            "testId": this.currentScenetId,
            "pageIndex": this.taskCurrentPage,
            "pageSize": this.taskItemPage,
            "taskType": this.taskTypeTable,
            "taskMode": this.currentTaskMode,
        });

    },
    methods: {
        getMsgFormSon(data) {
            this.propertiesData = data;
        },
        fgm(value) {
            console.log(value)
            if (value) {//进行查询
                this.getLoopReadResult();
            } else {//清除定时器

            }
        },
        clickEvent: function () {
            this.$refs.ceReadFileCollect.handleEmpty()
            this.$refs.ceReadFileCollect.getQgaReadLoopInfoList()
            // console.log('--')
            // console.log(this.headerData)
            // this.$emit("success",this.taskTypeTableTitle)
            // this.loadConfiguration(this.taskTypeTable)
            this.loadConfiguration("qga_read")
            this.taskConfigerMess = false
        },
        handleSelectAll(status) {
            this.$refs.selection.selectAll(status)
        },
        createFlagTask(nodeId = '') {
            this.tempTaskBol = false;
            this.formValidate.taskMode = "normal";
            this.$refs['formValidate'].resetFields();
            if (typeof (nodeId) == "string") {
                this.processNodeId = nodeId;
                if (nodeId == "temp") {
                    this.tempTaskBol = true
                    this.disabledTepBol = true;
                    this.formValidate.taskMode = 'temp'
                }
            }
            this.judgePanelType = true
            // this.$refs['formValidate'].resetFields();
            this.vmCurrentPage = 1
            this.vmItemPage = 10
            this.formValidate.configer = "";
            this.formValidate.vmName = "";
            this.formValidate.vmIP = "";
            this.configurationData = [];
            this.judgeVmStatus()
            this.loadConfiguration("qga_read")
            // this.formValidate.taskMode = "normal";
            this.propertiesData = [{
                key: '',
                value: '',
            }];
            this.getVmList({ pageIndex: this.vmCurrentPage, pageSize: this.vmItemPage, order: "asc", sortBy: "name", name: this.formValidate.vmName, ipAddress: this.formValidate.vmIP })
            this.createFlagTaskModal = true;
            // this.formValidate.name = "";

            this.formValidate.desc = ""
            // this.selectedVmDataTable = []
            this.selectedVmDataTable = []
            this.formValidate.selectedVmData = []
        },
        ok() {
            this.handleSubmit('formValidate')
        },
        cancel() {
            //  this.$Message.info('Clicked cancel')
        },
        handleSubmit(name) {
            let $this = this;
            this.properties = {};
            if (this.propertiesData.length != 0) {
                let attrData = $this.propertiesData;
                for (let index = 0; index < attrData.length; index++) {
                    const element = attrData[index];
                    if (element.key) {
                        $this.properties[element.key] = element.value;
                    }
                }
            }
            $this.$refs[name].validate((valid) => {
                if (valid) {
                    // $this.$Message.success('Success!');
                    let configName = this.configurationData.find(item => item.id === $this.formValidate.configer).name;
                    if ($this.selectedVmDataTable.length != 0) {
                        if ($this.judgePanelType) {//判断是保存还是修改
                            $this.saveoutbandTask({
                                name: $this.formValidate.name,
                                configId: $this.formValidate.configer,
                                configName: configName,
                                description: $this.formValidate.desc,
                                deviceIdList: $this.selectedVmDataTable,
                                deviceType: "VM",
                                taskType: $this.taskTypeTable,
                                testId: $this.currentScenetId,
                                metadata: $this.metadataConfigerInfor,
                                properties: $this.properties,
                                taskMode: $this.formValidate.taskMode,
                            })
                        } else {
                            $this.amendTask({
                                name: $this.formValidate.name,
                                configId: $this.formValidate.configer,
                                configName: configName,
                                description: $this.formValidate.desc,
                                deviceIdList: $this.selectedVmDataTable,
                                deviceType: "VM",
                                taskType: $this.taskTypeTable,
                                testId: $this.currentScenetId,
                                metadata: $this.metadataConfigerInfor,
                                properties: $this.properties,
                                taskMode: $this.formValidate.taskMode,
                            })
                        }
                    } else {
                        $this.$Message.info("请选择虚拟机")
                        $this.createFlagTaskModalLoading = false;
                        $this.$nextTick(() => {
                            $this.createFlagTaskModalLoading = true;
                        });
                    }
                } else {
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }

            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        addVmAfterTable(param) {
            let data = this.dataVmList;
            this.dataVmList.forEach((item,i) => {
                if (item.id == param.id) {
                    item._checked = true;
                    item._disabled = true;
                }
            })
        },
        handleAdd() {
            // if (this.selectedVmData.length) {
            //     this.selectedVmData.push(this.count[this.count.length - 1] + 1);
            // } else {
            //     this.selectedVmData.push(0);
            // }
        },
        handleClose2(event, name) {
            // console.log(event)
            // console.log(name);
            let $this = this;
            let data = this.formValidate.selectedVmData;
            $this.selectedDataConfiger = [];
            let _data = this.selectedVmDataTable;
            data.forEach((item,i) => {
                if (item) {
                    if (item.id == name) {
                        data.splice(i, 1);
                        // _data.remove(name);
                        _data.splice($this.selectedVmDataTable.findIndex(vmId => vmId == name),1);
                        $this.judgeVmStatus()
                    }
                }
            });

            // console.log(key);
            // const index = this.selectedVmData.indexOf(name);
            // this.count.splice(index, 1);
        },
        judgeVmStatus() {
            let data = this.dataVmList;
            let data_ = this.selectedVmDataTable
            // console.log(data_)
            data.forEach((item,i) => {
                // console.log(item.id)
                if (data_.indexOf(item.id) != -1) {
                    // alert('-')
                    item._checked = true;
                    item._disabled = true;
                } else {
                    item._checked = false;
                    item._disabled = false;
                }
            })
        },
        loadConfiguration(operation) {
            let $this = this;
            // axios({
            //     url: this.GLOBAL._projPath_resTasktemplate + "item?" + this.BASE.getParamStr({
            //         "operation": operation,
            //         size: 2147483647
            //     }),
            // }).
            let params = {
                "operation":operation,
                size: 2147483647
            };
            loadItemConfiguration(params).then((response) => {
                $this.configurationData = [];
                if (response.code == 1 || response.code == 0) {
                    let ConfigurationList = response.data.list;
                    if (ConfigurationList == "") {
                        return;
                    }
                    ConfigurationList.forEach((item,i) => {
                        $this.configurationData.push({
                            name: item.name,
                            id: String(item.id),
                        })
                    });
                }else{
                    $this.$Message.error(response.message)
                }
            })

        },
        getVmList(getParamObj) {
            let $this = this;
            // axios({
            //     url: 'topo/deployed/projects/' + this.currentProjectId + '/vms?' + this.BASE.getParamStr(getParamObj),
            //     // url: this.GLOBAL._projPath_deploy+'project/servers?'+this.BASE.getParamStr(getParamObj),
            // })
            getParamObj.projectId = this.currentProjectId;
            getAllVm(getParamObj).then((response) => {
                $this.dataVmList = [];
                if (response.code == 1) {
                    let vmData = response.data.items;
                    $this.vmTotal = Number(response.data.total);
                    let disabled_ = false;
                    let checked_ = false;
                    vmData.forEach((item,i) => {
                        if ($this.selectedVmDataTable.length != 0) {
                            if ($this.selectedVmDataTable.indexOf(item.id) != -1) {
                                disabled_ = true
                                checked_ = true
                            } else {
                                disabled_ = false
                                checked_ = false
                            }
                        } else {
                            disabled_ = false
                            checked_ = false
                        }
                        let IPS = [];
                        if (item.addresses && item.addresses.length != 0) {
                            for (let i = 0; i < item.addresses.length; i++) {
                                if (item.addresses[i].ips && item.addresses[i].ips.length != 0) {
                                    for (let index = 0; index < item.addresses[i].ips.length; index++) {
                                        const element = item.addresses[i].ips[index];
                                        IPS.push(element.ipAddress);
                                    }
                                }
                            }
                        }
                        $this.dataVmList.push({
                            name: item.name,
                            id: item.id,
                            IP: IPS,
                            _disabled: disabled_,
                            _checked: checked_,
                        })
                    })
                }
            })
        },
        switchineVmCurrentPage(numberPage) {
            this.vmCurrentPage = numberPage;
            this.getVmList({ pageIndex: this.vmCurrentPage, pageSize: this.vmItemPage, order: "asc", sortBy: "name", name: this.formValidate.vmName, ipAddress: this.formValidate.vmIP, sysType: this.configerSystype })
        },
        switchVmItemPage(numberSize) {
            this.vmItemPage = numberSize
            this.getVmList({ pageIndex: this.vmCurrentPage, pageSize: this.vmItemPage, order: "asc", sortBy: "name", name: this.formValidate.vmName, ipAddress: this.formValidate.vmIP, sysType: this.configerSystype })
        },
        saveoutbandTask(saveDateJson) {
            let $this = this;
            // axios({
            //     url: this.GLOBAL._projPath_task + "tasks",
            //     method: 'post',
            //     data: saveDateJson
            // })
            saveoutbandTask(saveDateJson).then((response) => {
                if (response.code == 1) {
                    this.taskCurrentPage = 1
                    this.taskItemPage = 10
                    $this.createFlagTaskModal = false;
                    $this.$Message.success('添加任务成功');
                    $this.getTaskList({
                        "testId": $this.currentScenetId,
                        "pageIndex": $this.taskCurrentPage,
                        "pageSize": $this.taskItemPage,
                        "taskType": $this.taskTypeTable,
                        "taskMode": $this.currentTaskMode,
                    })
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                    // if (typeof ($this.processNodeId) == "string") {
                    //     if ($this.tempTaskBol) {
                    //         axios({
                    //             url: $this.GLOBAL._projPath_process + "tasks/" + response.data.id + '/execute?operation=start',
                    //             method: 'post'
                    //         }).then((data) => {
                    //             let activeType;
                    //             if (data.code == 1) {
                    //                 $this.$Message.success("启动任务成功")
                    //             } else {
                    //                 $this.$Message.error(response.message)
                    //             }
                    //         })
                    //     } else {
                    //         axios({
                    //             url: this.GLOBAL._projPath_process + 'tasks/' + response.data.id + '?nodeId=' + $this.processNodeId,
                    //             method: 'patch'
                    //         }).then((data) => {
                    //             if (data.code == 1) {
                    //                 $this.processNodeId = "";
                    //             } else {
                    //                 $this.$Message.error(data.message)
                    //             }
                    //         })
                    //     }
                    // } else {
                    //     $this.$parent.getStatisticsList();
                    // }
                } else {
                    $this.$Message.error(response.message)
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }
            })
        },
        getTaskList(obj) {
            this.selectedData = [];
            let $this = this;
            // clearInterval($this.headerData.serintervalTimeFun)
            // axios({
            //     url: this.GLOBAL._projPath_process + "/tasks?" + this.BASE.getParamStr(obj),
            // })
            getTaskList(obj).then((response) => {
                if (response.code == 1) {
                    $this.taskData = [];
                    $this.taskTotal = response.data.total;
                    let setintrvalBol = false
                    // let _s = 0,_e = 0,_i = 0,_r = 0,stintervalBol = false;
                    if (response.data.items.length != 0) {
                        $this.taskData = response.data.items;
                        response.data.items.forEach((item,i) => {
                            if (item.status == "running" || item.status == "starting" || item.status == "closing") {
                                // _r++;
                                setintrvalBol = true;
                            }
                        })
                    }
                    // if (setintrvalBol) {
                    //     $this.headerData.serintervalTimeFun = setInterval($this.setintervalTaskList, 1000);
                    // } else {
                    //     clearInterval($this.headerData.serintervalTimeFun)
                    //     $this.setintervalTaskList();
                    // }
                    // $this.getTaskListDeailData()
                    // $this.$emit("success",$this.taskTypeTableTitle+'-'+_s+'-'+_e+'-'+_i+'-'+_r+'-'+stintervalBol+'-'+$this.taskCurrentPage+'-'+$this.taskItemPage)
                } else if (response.code == -2) {

                } else {
                    $this.$Message.error(response.message)
                }
            })
        },
        switchineTaskCurrentPage(numberPage) {
            this.taskCurrentPage = numberPage;
            this.getTaskList({
                "testId": this.currentScenetId,
                "pageIndex": this.taskCurrentPage,
                "pageSize": this.taskItemPage,
                // "configType":"",
                "taskType": this.taskTypeTable,
                "taskMode": this.currentTaskMode,
            })
        },
        switchTaskItemPage(numberSize) {
            this.taskItemPage = numberSize
            this.getTaskList({
                "testId": this.currentScenetId,
                "pageIndex": this.taskCurrentPage,
                "pageSize": this.taskItemPage,
                // "configType":"",
                "taskType": this.taskTypeTable,
                "taskMode": this.currentTaskMode,
            })
        },
        deleteTask(taskId) {
            let $this = this
            // axios({
            //     url: this.GLOBAL._projPath_process + "tasks/" + taskId,
            //     method: 'delete'
            // })
            deleteTask(taskId).then((response) => {
                if (response.code == 1) {
                    if (response.data[0].code == 1) {
                        this.taskCurrentPage = (this.taskData.length == 1 && this.taskCurrentPage > 1) ?
                            this.taskCurrentPage - 1 : this.taskCurrentPage;
                        $this.getTaskList({
                            "testId": $this.currentScenetId,
                            "pageIndex": $this.taskCurrentPage,
                            "pageSize": $this.taskItemPage,
                            "taskType": $this.taskTypeTable,
                            "taskMode": $this.currentTaskMode,
                        })
                        $this.$Message.success("删除成功")
                        $this.$parent.getStatisticsList();
                    } else {
                        $this.$Message.error(response.data[0].message)
                    }

                } else {
                    $this.$Message.error(response.data[0].message)
                }
            })

        },
        updateTask(taskId) {
            this.judgePanelType = false
            this.formValidate.vmName = "";
            this.formValidate.vmIP = "";
            let $this = this
            // axios({
            //     url: this.GLOBAL._projPath_process + "tasks/" + taskId,
            // })
            taskDetail(taskId).then((response) => {
                if (response.code == 1) {
                    $this.workingAreaTaskId = response.data.id
                    $this.selectedVmDataTable = []
                    $this.formValidate.selectedVmData = []
                    $this.createFlagTaskModal = true;
                    $this.formValidate.name = response.data.name;
                    $this.formValidate.desc = response.data.description;
                    $this.formValidate.configer = response.data.configId;
                    $this.propertiesData = [];
                    if (response.data.metadata) {
                        // $this.configerParams = true;
                        $this.formValidate.category = response.data.category ? response.data.category : ''
                        $this.formValidate.path = response.data.metadata.path ? response.data.metadata.path : ''
                        $this.formValidate.type = response.data.metadata.type ? response.data.metadata.type : ''
                        // _this.formValidate.content = response.data.data.content ? response.data.data.content: ''
                        $this.formValidate.osType = response.data.metadata.osType ? response.data.metadata.osType : ''
                        $this.formValidate.kafkaAdress = response.data.metadata.kafka_addr ? response.data.metadata.kafka_addr : ''
                        $this.formValidate.configTopic = response.data.metadata.kafka_topic ? response.data.metadata.kafka_addr : ''
                        $this.formValidate.configPeriod = response.data.metadata.gap ? response.data.metadata.gap : ''
                        $this.metadataConfigerInfor = response.data.metadata;
                    }
                    if (response.data.deviceData.length != 0) {
                        response.data.deviceData.forEach((item,i) => {
                            $this.selectedVmDataTable.push(item.deviceId);
                            $this.formValidate.selectedVmData.push({
                                name: item.deviceName,
                                id: item.deviceId
                            })
                        })
                    }
                    $this.formValidate.taskMode = response.data.taskMode;
                    if (JSON.stringify(response.data.properties) != "{}") {
                        for (let i in response.data.properties) {
                            let obj = {};
                            obj['key'] = i;
                            obj['value'] = response.data.properties[i];
                            $this.propertiesData.push(obj)
                        }
                    }
                    axios({
                        url: '/tasktemplate/item/' + response.data.configId,
                        method: 'get'
                    }).then((response) => {
                        if (response.code != '1') {
                            $this.$Message.error(response.message);
                        } else {
                            $this.configerSystype = response.data.data.osType;
                            $this.getVmList({ pageIndex: $this.vmCurrentPage, pageSize: $this.vmItemPage, order: "asc", sortBy: "name", name: $this.formValidate.vmName, ipAddress: $this.formValidate.vmIP, sysType: $this.configerSystype })
                        }
                    });
                } else {
                    $this.workingAreaTaskId = ""//清空任务id
                    $this.$Message.error(response.message)
                }
            }).then(() => {
                $this.loadConfiguration("qga_read")
                $this.judgeVmStatus()
            })


        },
        amendTask(amendTaskData) {
            let $this = this;
            // axios({
            //     url: this.GLOBAL._projPath_task + "tasks/" + this.workingAreaTaskId,
            //     method: 'put',
            //     data: amendTaskData
            // })
            amendTask(this.workingAreaTaskId,amendTaskData).then((response) => {
                if (response.code == 1) {
                    $this.createFlagTaskModal = false;
                    $this.$Message.success("修改成功");
                    $this.getTaskList({
                        "testId": $this.currentScenetId,
                        "pageIndex": $this.taskCurrentPage,
                        "pageSize": $this.taskItemPage,
                        "taskType": $this.taskTypeTable,
                        "taskMode": $this.currentTaskMode,
                    })
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                } else {
                    $this.$Message.error(response.message)
                    $this.createFlagTaskModalLoading = false;
                    $this.$nextTick(() => {
                        $this.createFlagTaskModalLoading = true;
                    });
                }
            })
        },
        activeTask(taskId, active) {
            let $this = this
            if (active == "开始") {
                active = "start"
            } else if (active == "停止") {
                active = "stop"
            }
            // axios({
            //     url: this.GLOBAL._projPath_process + "tasks/" + taskId + '/execute?operation=' + active,
            //     method: 'post'
            // })
            activeTask(taskId,active).then((response) => {
                let activeType;
                if (response.code == 1) {
                    $this.$Message.success(active + "任务成功")
                    $this.getTaskList({
                        "testId": $this.currentScenetId,
                        "pageIndex": $this.taskCurrentPage,
                        "pageSize": $this.taskItemPage,
                        "taskType": $this.taskTypeTable,
                        "taskMode": $this.currentTaskMode,
                    });
                } else {
                    $this.$Message.error(response.message)
                }
            })

        },
        taskDeail(taskId) {
            let $this = this
            // axios({
            //     url: this.GLOBAL._projPath_process + "tasks/" + taskId + '/histories',
            // })
            taskDetailHis(taskId).then((response) => {
                if (response.code == 1) {
                    $this.taskDeailData = [];
                    $this.taskDeailModal = true
                    // $this.taskDeailData= reponse.data;
                    response.data.forEach((item,i) => {
                        $this.taskDeailData.push({
                            deviceName: item.deviceName,
                            id: item.id,
                            status: item.status,
                            message: item.message,
                            deviceId: item.deviceId,
                            host: '',
                            hostIp: '',
                            instance: '',
                            osId: '',
                            created: item.created ? item.created : '',
                            updated: item.updated ? item.updated : '',
                            _expanded: false
                        })
                    })
                } else {
                    $this.$Message.error(response.message)
                }
            })

        },
        deleteManyTask(selection) {
            let $this = this;
            if (this.selectedData.length == 0) {
                this.$Message.error("请选择要删除的任务")
            } else {
                // axios({
                //     url: this.GLOBAL._projPath_process + "tasks/" + this.selectedData.map((item) => item.id).join(','),
                //     method: 'delete'
                // })
                deleteManyTask(this.selectedData.map((item)=>item.id).join(',')).then((response) => {
                    if (response.code == 1) {
                        response.data.forEach((item,i) => {
                            if (item.code == 1) {
                                $this.taskCurrentPage = ($this.taskData.length == $this.selectedData.length && $this.taskCurrentPage > 1) ?
                                    $this.taskCurrentPage - 1 : $this.taskCurrentPage;
                                $this.$Message.success("删除成功")
                            } else {
                                $this.$Message.error(item.message)
                            }
                        })
                        $this.getTaskList({
                            "testId": $this.currentScenetId,
                            "pageIndex": $this.taskCurrentPage,
                            "pageSize": $this.taskItemPage,
                            "taskType": $this.taskTypeTable,
                            "taskMode": $this.currentTaskMode,
                        })
                    } else {
                        $this.$Message.error(response.message)
                    }
                })
            }
        },
        getSelectedTableItem(selection) {
            this.selectedData = [];
            this.selectedData = selection

            console.log(selection)
        },
        hostDeail(row) {
            console.log(row.deviceId);
            let $this = this;
            if (!row._expanded) {
                // axios({
                //     url: 'topo/deployed/vms/' + row.deviceId,
                // })
                hostDetail(row.deviceId).then((response) => {
                    if (response.code == 1) {
                        $this.taskDeailData.forEach((item,i) => {
                            if (row.deviceId == item.deviceId) {
                                item._expanded = true
                                item.host = response.data.host;
                                item.hostIp = response.data.hostIp;
                                item.instance = response.data.instanceName;
                                item.osId = response.data.cloudId;

                                let IPS = [];
                                let cidrs = [];
                                if (response.data.addresses && response.data.addresses.length != 0) {
                                    for (let i = 0; i < response.data.addresses.length; i++) {
                                        if (response.data.addresses[i].ips && response.data.addresses[i].ips.length != 0) {
                                            for (let index = 0; index < response.data.addresses[i].ips.length; index++) {
                                                const element = response.data.addresses[i].ips[index];
                                                IPS.push(element.ipAddress);
                                                cidrs.push(element.cidr)
                                            }
                                        }
                                    }
                                }

                                item.IP = IPS
                                item.cidr = cidrs
                                return false;
                            }
                        })
                    }
                })

            } else {
                row._expanded = !row._expanded;
            }
        },
        // setintervalTaskList(obj){
        //     let $this = this;
        //     $.ajax({
        //         type:"get",
        //         url:this._projPath_processN +"tasks?"+GlobalTool.getParamStr(obj),
        //         async:true,
        //         dataType:"json",
        //         headers:{"Authorization":localStorage.token},
        //         contentType:"application/json",
        //         success:function(reponse){
        //             if(reponse.code==1){
        //                 if(reponse.data.list.length!=0){
        //                     $.each(reponse.data.list,function(i,item){

        //                     })
        //                     $this.taskData = reponse.data.list;
        //                 }
        //             }else if(reponse.code==-2){

        //             }else{
        //                 $this.$Message.error(response.message)
        //             }
        //         },
        //         error:function(){
        //             $this.$Message.error(errorMessage)
        //         }
        //     });
        // },
        refreshTaskList() {
            this.getTaskList({
                "testId": this.currentScenetId,
                "pageIndex": this.taskCurrentPage,
                "pageSize": this.taskItemPage,
                "taskType": "",
                "taskMode": this.currentTaskMode,
            });
        },
        refreshVmList() {
            this.vmCurrentPage = 1;
            this.getVmList({ pageIndex: this.vmCurrentPage, pageSize: this.vmItemPage, order: "asc", sortBy: "name", name: this.formValidate.vmName, ipAddress: this.formValidate.vmIP, sysType: this.configerSystype })
        },
        getTaskListDeailData() {
            let $this = this
            // axios({
            //     url: this.GLOBAL._projPath_process + "overview/task/countByStatus?" + this.BASE.getParamStr({
            //         "testId": $this.currentScenetId,
            //         "taskType": $this.taskTypeTable,
            //         "node": "false"
            //     }),
            // })
            let params = {
            	"testId":$this.currentSceneId,
                "taskType":$this.taskTypeTable,
                "node":"false"
            }
            getTaskListDetailData(params).then((response) => {
                if (response.code == 1) {
                    let _s = 0, _e = 0, _i = 0, _r = 0, stintervalBol = false;
                    _s = response.data.completed;
                    _e = response.data.error;
                    _i = response.data.initialized;
                    _r = Number(response.data.running) + Number(response.data.starting) + Number(response.data.closing);
                    if (_r != 0) {
                        stintervalBol = true;
                    }
                    $this.$emit("success", $this.taskTypeTableTitle + '-' + _s + '-' + _e + '-' + _i + '-' + _r + '-' + stintervalBol + '-' + $this.taskCurrentPage + '-' + $this.taskItemPage)
                } else if (response.code == -2) {

                } else {
                    $this.$Message.error(response.message)
                }
            })

        },
        setintervalTaskList() {
            // alert('-')
            let $this = this;
            // axios({
            //     url: this.GLOBAL._projPath_process + "tasks?" + this.BASE.getParamStr({
            //         "testId": this.currentScenetId,
            //         "pageIndex": this.taskCurrentPage,
            //         "pageSize": this.taskItemPage,
            //         "taskType": this.taskTypeTable,
            //         // "node":"false"
            //     }),
            // })
            let params = {
            	"testId":this.currentSceneId,
                "page":this.taskCurrentPage,
                "rows":this.taskItemPage,
                "taskType":this.taskTypeTable,
                "node":"false"
            }
            getTaskList(params).then((response) => {
                if (response.code == 1) {
                    $this.taskData = [];
                    if (response.data.items.length != 0) {
                        let stintervalBol = false
                        $this.taskData = response.data.items;
                        response.data.items.forEach((item,i) => {
                            if (item.status == "running" || item.status == "starting" || item.status == "closing") {
                                stintervalBol = true
                            }
                            $this.taskData[i].status = item.status;
                        })
                        // if (!stintervalBol) {
                        //     clearInterval($this.headerData.serintervalTimeFun)
                        // }
                    }
                    $this.getTaskListDeailData()
                } else if (response.code == -2) {

                } else {
                    $this.$Message.error(response.message)
                }
            })

        },
        addSelectedData() {
            let that = this, bol = true;
            that.selectedDataConfiger.forEach((item,i) => {
                console.log(item)
                if (that.selectedVmDataTable.indexOf(item.id) != -1) {

                } else {
                    bol = false
                    that.addVmAfterTable(item)
                    that.selectedVmDataTable.push(item.id)
                    that.formValidate.selectedVmData.push({
                        "name": item.name,
                        "id": item.id
                    })
                }
            })
            if (bol) {
                that.$Message.info("请选择要添加的内容")
            }
        },
        getSelectedData(selection) {
            // console.log(selection)
            this.selectedDataConfiger = [];
            this.selectedDataConfiger = selection;
        },
        /**
         * @description: 鼠标移上配置显示详情
         * @param {type} 
         * @return: 
         */
        mouseOverConfiger(e, value) {
            clearTimeout(this.optionHoverEvent)
            let _this = this;
            this.optionHoverEvent = setTimeout(() => {
                if (this.hoverCdraBol) {
                    return;
                }
                this.configurationInformation = true
                this.cardPanelLeft = e.layerX + 30 + 'px'
                this.cardPanelTop = e.layerY + 35 + 'px'
                //查询配置详细信息
                // axios({
                //     url: '/tasktemplate/item/' + value,
                //     method: 'get',
                // })
                showConfiguration(value).then(function (response) {
                    if(response.code != '1'){
                        _this.$Message.info(response.message);
                    }else{
                        _this.configPanel.configName = response.data.name
                        _this.configPanel.configPath = response.data.data.path
                        _this.configPanel.configSystype = response.data.data.osType
                        _this.configPanel.kafkaAdress = response.data.data.kafka_addr
                        _this.configPanel.configTopic = response.data.data.kafka_topic
                        _this.configPanel.configPeriod = response.data.data.gap || 0
                        _this.configPanel.configDescription = response.data.description
                        _this.configPanel.configCreateTime = response.data.createTime
                        _this.configPanel.configCreatorName = response.data.creatorName
                    }
                });
            }, 300);
        },
        mouseLeaveConfiger(ev, value) {
            clearTimeout(this.optionOutEvent)
            this.optionOutEvent = setTimeout(() => {
                if (!this.hoverCdraBol) {
                    this.configurationInformation = false
                    this.cardPanelLeft = '0'
                    this.cardPanelTop = '0'
                }
            }, 300);
        },
        showConfiguration(value) {
            this.configurationInformation = false
            this.selectedVmDataTable = [];
            this.formValidate.selectedVmData = [];
            let _this = this;
            if (value) {
                // axios({
                //     url: '/tasktemplate/item/' + value,
                //     method: 'get',
                // })
                showConfiguration(value).then(function (response) {
                    if(response.code != '1'){
                        _this.$Message.info(response.message);
                    }else{
                        // _this.configerParams = true;
                        _this.formValidate.category = response.data.category ? response.data.category : ''
                        _this.formValidate.path = response.data.data.path ? response.data.data.path : ''
                        _this.formValidate.type = response.data.data.type ? response.data.data.type : ''
                        // _this.formValidate.content = response.data.data.content ? response.data.data.content: ''
                        _this.formValidate.osType = response.data.data.osType ? response.data.data.osType : ''
                        _this.formValidate.kafkaAdress = response.data.data.kafka_addr ? response.data.data.kafka_addr : ''
                        _this.formValidate.configTopic = response.data.data.kafka_topic ? response.data.data.kafka_addr : ''
                        // _this.formValidate.configPeriod = response.data.data.gap ? response.data.data.gap : 0
                        _this.metadataConfigerInfor =  response.data.data;
                        delete _this.metadataConfigerInfor.gap;
                        _this.configPanel.configName = response.data.name;
                        _this.configerSystype = response.data.data.osType;
                        _this.getVmList({pageIndex:_this.vmCurrentPage,pageSize:_this.vmItemPage,order:"asc",sortBy:"name",name:_this.formValidate.vmName,ipAddress:_this.formValidate.vmIP,sysType:_this.configerSystype})
                        // _this.getVmList({page:_this.vmCurrentPage,rows:_this.vmItemPage,projectId:_this.currentProjectId,order:"asc",sortBy:"name",name:_this.formValidate.vmName,ip:_this.formValidate.vmIP,sysType:_this.configerSystype})
                        
                    }
                });
            }else{
                // _this.configerParams = false
                _this.formValidate.category = ""
                _this.formValidate.path = ""
                _this.formValidate.type = ""
                _this.formValidate.content = ""
                _this.formValidate.osType = ""
                _this.formValidate.kafkaAdress = ""
                _this.formValidate.configTopic = ""
                _this.configerSystype = "";
                _this.getVmList({pageIndex:_this.vmCurrentPage,pageSize:_this.vmItemPage,order:"asc",sortBy:"name",name:_this.formValidate.vmName,ipAddress:_this.formValidate.vmIP,sysType:_this.configerSystype})
            }
        },
        jinru(e){
            this.hoverCdraBol = true
        },
        yichu(e){
            this.hoverCdraBol = false
            this.configurationInformation = false
            this.cardPanelLeft = '0'
            this.cardPanelTop = '0'
        },
        ddd(e){
            e.preventDefault()
            e.stopPropagation();
        },
        overStyle(){
            this.boxShadow = '5px 5px 5px #ddd'
        },
        removeStyle(){
            this.boxShadow = ''
        },
        getLoopReadResult(){
            axios({
                url:'/process/result?historyId='+this.historyId+'&created='+this.historyCreated
            }).then((response)=>{
                if(response.code==1){
                    if(response.data.length!=0){
                        this.contentLoop = response.data.result.length > 0 ? response.data.result[0].content : "";
                    }else{
                        this.contentLoop = "无结果"
                    }
                    // this.settimeLoopResult =  setTimeout(() => {
                    //     this.getLoopReadResult()
                    // }, 3000);
                }else{
                    this.$Message.error(response.message)
                }
            })
        }
    },
    watch:{
        listenParam(){
            // console.log(this.buttonsName)
        }
    }
}
</script>
<style scoped>
    .headerBtn{
        text-align: left;
        margin: 15px 0;
    }
    .pageStyle{
        text-align:right
    }
    .ivu-table-wrapper{
        overflow:visible
    }
    .pageStyleVm{
        text-align: center;
        margin-top:10px;
    }
    table .ivu-poptip-confirm .ivu-poptip-body .ivu-icon{
        left: 11px
    }
    .position_i{
        position: relative;
        top: -1px;
        margin-right: 5px
    }
    /* td{
        border-right: 0 !important
    } */
    .starlet{
        color: red;
        position: absolute;
        left: -60px;
        font-size: 18px;
        line-height: 38px;
        font-weight: 800;
    }
    .zIndexStyleBtn{
        position:relative;
        z-index:55
    }
    ul li{
        list-style: none
    }
    ._dot{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f90;
        margin-right: 5px
    }
    .ivu-table-tip{
        overflow: hidden !important;
    }
    .flex-wrap{
        display: flex;
        flex-wrap:wrap;
    }
    </style>
    <style>
    #resultOnce .ivu-modal-body{
        padding: 2px !important;
        padding-top: 0px !important;
    }
    #resultOnce .ivu-modal-header{
        padding: 2px;
    }
    #resultOnce .ivu-icon-ios-close{
        top: -8px !important;
    }
    </style>

